<template>
  <el-config-provider :locale="zhCn">
    <div class="rootContainer">
      <Header />

      <div class="router">
        <router-view v-show="!showSub"></router-view>

        <div id="sub-container" v-show="showSub"></div>

        <!-- 右下角悬浮功能栏  z-index 998 -->
        <RightBottomBar :target="routerElement"></RightBottomBar>
      </div>

      <!-- 加载Loading页面  z-index 999 -->
      <LoadingPage v-show="showLoadingPage"></LoadingPage>

      <!-- 请求loading动画  z-index 998  -->
      <RequestLoading v-show="requestLoadingVisible"></RequestLoading>
    </div>

    <!-- 全局消息提示弹窗 -->
    <MessageAlert
      v-model:visible="alertVisible"
      :param="alertParam"
      @close="closeAlert"
    ></MessageAlert>
  </el-config-provider>
</template>

<script setup lang="ts">
import { onBeforeMount, watch, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import {
  useWindowSizeStore,
  useThemeStore,
  useSortTreeStore,
  useUserStore,
} from '@/features/store/store'
import { useTabStore, useRouterHistoryStore } from '@/features/store/tabStore'
import {
  useMessageAlertStore,
  useLoadingPageStore,
  useRequestLoadingStore,
} from '@/features/store/componentStore'
import { setRequestLoadingStore } from '@/request/request'
import { deviceControl } from '@/utils/electronFunc'

import Header from '@/components/Header/Header.vue'
import RightBottomBar from '@/components/RightBottomBar/RightBottomBar.vue'
import MessageAlert from '@/components/MessageAlert/MessageAlert.vue'
import LoadingPage from '@/components/Loading/LoadingPage.vue'
import RequestLoading from '@/components/Loading/RequestLoading.vue'

const route = useRoute()
// 判断是否需要显示子应用容器
const showSub = ref<boolean>(false)
watch(
  () => route.path,
  () => {
    if (route.path.includes('/subApplication')) showSub.value = true
    else showSub.value = false
  }
)

const routerElement = ref<Element>(null)
onMounted(() => {
  routerElement.value = document.getElementsByClassName('router')[0]
})

// MessageAlert 组件全局状态
const { alertVisible, alertParam } = storeToRefs(useMessageAlertStore())
const { closeAlert } = useMessageAlertStore()

// LoadingPage 组件全局状态
const { showLoadingPage } = storeToRefs(useLoadingPageStore())

// RequestLoading 组件全局状态
const { requestLoadingVisible } = storeToRefs(useRequestLoadingStore())
onBeforeMount(() => {
  setRequestLoadingStore(useRequestLoadingStore())
})

//
//
//  登录状态要获取的值
const { loginStatus } = storeToRefs(useUserStore())
watch(
  () => loginStatus.value,
  () => {
    if (loginStatus.value) {
      useSortTreeStore().getSortList()
    }
  }
)

//
//
// 初始化的一些配置
onBeforeMount(() => {
  deviceControl.deviceIdGet()

  // 初始化用户系统信息
  useUserStore().getUserInfo()
  // 初始化一下主题颜色
  useThemeStore().setTheme('theme-default')
  // 初始化一下分类树状列表
  useSortTreeStore().getSortList()
  // 初始化一下头部tab标签列表
  useTabStore().initTabList()
  // 初始化一下本地访问路径
  useRouterHistoryStore().getPathHistory()
  // 监听窗口大小变化
  useWindowSizeStore().watchWindowResize()
})
</script>

<style scoped lang="less">
.rootContainer {
  background-color: var(--theme-background);
  height: 100vh;
  width: 100vw;
  > .router {
    width: calc(100vw - 32px);
    // height: calc(100vh -  92px);
    height: calc(100vh - 32px - 36px - 8px - 16px);
    overflow: auto;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 8px;
    background-color: #f8f8f8;
    border-radius: 10px;
  }
}

/deep/ #sub-container {
  width: 100%;
  height: 100%;
  > div {
    width: 100%;
    height: 100%;
  }

  #app {
    width: 100%;
    height: 100%;
  }
}
</style>
